<template>
    <view class="orderList">
      <view class="item" v-for="(item, index) in OrderList" :key="item._id">
        <view class="info">
          <p>体检套餐：{{ item.phy_name }}</p>
          <p>体检人：{{ item.name }}</p>
          <p>体检时间：{{ item.phy_time }}</p>
          <p>体检地点：{{ item.address }}</p>
          <p>订单编号：{{ item.order_number }}</p>
        </view>
        <view class="button" v-if="item.cancel">
          <p class="p">￥{{ item.price }}</p>
          <button class="button1" @click="CanCelOrder(item._id)">
            取消预约
          </button></view
        >
        <view class="button" v-else>
          <p class="p">￥{{ item.price }}</p>
          <button class="button2">已取消预约</button></view
        >
      </view>
    </view>
  </template>
  
  <script lang="ts" setup>
  import { ref, reactive, onMounted } from "vue";
  import { api } from "../../api/api";
  import type { tijianResT } from "../../types/type";
  // 获取数据
  const OrderList = ref<tijianResT[]>([]);
  const getList = async () => {
    const res: any = await api.phyuser_order();
    console.log(res);
    OrderList.value = res.data;
  };
  onMounted(() => {
    getList();
  });
  const CanCelOrder = async (id: string) => {
    const res: any = await api.phycancel({ _id: id });
    console.log(res, "cancel");
    if (res.msg == "SUCCESS") {
      getList();
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .orderList {
    width: 100vw;
    overflow: hidden;
    background-color: #f5f5f5;
    padding: 0 30rpx;
    box-sizing: border-box;
    .item {
      width: 100%;
      //   height: 400rpx;
      background-color: #fff;
      border-radius: 20rpx;
      padding: 20rpx 30rpx;
      box-sizing: border-box;
      margin: 20rpx 0;
      .title {
        // padding: 50rpx 0;
        height: 100rpx;
        font-weight: 600;
        border-bottom: 1px solid #ccc;
        font-size: 35rpx;
        line-height: 100rpx;
      }
      .info {
        line-height: 60rpx;
      }
      .button {
        width: 100%;
        button {
          width: 250rpx;
          height: 80rpx;
          margin-left: 400rpx;
        }
        .p {
          margin-left: 550rpx;
        }
        .button1 {
          border: 1px solid #527be6;
          color: #527be6;
        }
        .button2 {
          border: 1px solid #ccc;
          color: #ccc;
        }
      }
    }
  }
  </style>
  